<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/common.css">
    <!-- <link rel="stylesheet" href="./css/bootstrap.css"> -->
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <!-- <script src="./innerHTML.js"></script> -->
    <script defer="defer">    
       $(function(){
        var inputs=document.getElementsByName("good-id");
      var all=document.getElementsByName("all")[0];
     //全选
      all.onclick=function(){
      for(var i=0;i<inputs.length;i++){
        inputs[i].checked=this.checked;
      }
      sumprice();
      }
   
      for(var i=0;i<inputs.length;i++){
      inputs[i].onclick=function(){
       var count=0;
        for(var j=0;j<inputs.length;j++){
        if(inputs[j].checked==true){
          count++
        }
      }
      //没有商品不能全选
        if(count<inputs.length){
          all.checked=false;
        }else{
          all.checked=true;
        }
        sumprice();
       }
      }
   
            //减少
            var minus=document.getElementsByName("minus");
            for(var i=0;i<minus.length;i++){
              minus[i].onclick=function(){
                var counts=this.nextElementSibling;
                var count=parseInt(counts.value);
                if(count>1){
                  counts.value=--count;
                }
                sumprice();
              }
            }
            //增加
            var plus=document.getElementsByName("plus");
            for(var i=0;i<plus.length;i++){
              plus[i].onclick=function(){
                var counts=this.previousElementSibling;
                var count=parseInt(counts.value);
                counts.value=++count;
                sumprice();
              }
            }
            
            //手动输入
            var counts=document.getElementsByName("count");
            for(var i=0;i<counts.length;i++){
              counts[i].onblur=function(){//onblur 事件会在对象失去焦点时发生。
                var count=parseInt(this.value);
                if(isNaN(count)||count<1){
                count=1;
                }
                this.value=count;
                sumprice();
              }
            }
            
            
            //计算
          function sumprice() {
              var tbody = document.getElementById("cart-goods-list");
              var tbodyTr = tbody.getElementsByTagName("tr");
              var sumprice=0;
              for(var i = 0; i < tbodyTr.length; i++) {
                //获取单价
                var priceEm = tbodyTr[i].getElementsByClassName("price-em")[0];
                var price = parseFloat(priceEm.innerText);
                //获取数量
                var counts = tbodyTr[i].getElementsByClassName("combo-value")[0];
                var count = parseInt(counts.value);
                //乘积
                var chengji=price*count;
                //把乘积弄到金额里面
                var amountEm=tbodyTr[i].getElementsByClassName("amount-em")[0];
                amountEm.innerText=chengji.toFixed(2);//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
                
                //获取单选框
                var liD=tbodyTr[i].getElementsByTagName("input")[0];
                if(liD.checked){
                  sumprice+=chengji;
                }
            }
            var zong=document.getElementById("total-amount-em");
            zong.innerText=sumprice.toFixed(2);
          }
            
            //删除
            document.getElementById("cart-delete").onclick=function(){
              var tbody = document.getElementById("cart-goods-list");
              var del=[];
              for(var i=0;i<inputs.length;i++){
                if(inputs[i].checked){
                del.push(inputs[i].parentElement.parentElement);
                }
              }
              for(var i=0;i<del.length;i++){
                tbody.removeChild(del[i]);
              }
              all.checked=false;
              sumprice();
            }
            //添加
            var icons = document.getElementsByClassName("icon");
              var tbody = document.getElementById("cart-goods-list");
              // var tr=document.createElement("tr");
            for(var i = 0;i < icons.length;i++){
              icons[i].onclick = function(){
                var img = $(this).parent().siblings(".show-image").children("img").attr("src");//获取点击元素父元素同级img的src
                console.log(img)
                var txt = $(this).siblings("p.good_name").html();
                console.log(txt)
                var money = $(this).siblings("p.good_price").children("span").html();
                console.log(money)
                var tr = document.createElement("tr");
                tr.innerHTML='<tr><td><input type="checkbox" name="good-id" value="1"></td><td class="goods"><div class="goods-image"><img style="width:80px;height:80px" src='+img+'></img></div><div class="goods-information"><h3>'+txt+'</h3><ul><li>假一赔四</li><li>支持7天无理由退货</li></ul></div></td><td><span class="price">￥<em class="price-em">'+money+'</em></span></td><td><div class="combo"><input type="button" name="minus" value="-" class="combo-minus"><input type="text" name="count" value="1" class="combo-value"><input type="button" name="plus" value="+" class="combo-plus"></div></td><td><strong class="amount">￥<em class="amount-em">'+money+'</em></strong></td></tr>';
                $(tbody).on("click", "tr", function(){
                  var inputs=document.getElementsByName("good-id");
            var all=document.getElementsByName("all")[0];
            //全选
            all.onclick=function(){
              for(var i=0;i<inputs.length;i++){
                inputs[i].checked=this.checked;
              }
            sumprice();
            }
            
            for(var i=0;i<inputs.length;i++){
              inputs[i].onclick=function(){
                var count=0;
                for(var j=0;j<inputs.length;j++){
                  if(inputs[j].checked==true){
                    count++
                  }
                }
                //没有商品不能全选
                  if(count<inputs.length){
                    all.checked=false;
                  }else{
                    all.checked=true;
                  }
                  sumprice();
              }
            }
                  //减少
            var minus=document.getElementsByName("minus");
            for(var i=0;i<minus.length;i++){
              minus[i].onclick=function(){
                var counts=this.nextElementSibling;
                var count=parseInt(counts.value);
                if(count>1){
                  counts.value=--count;
                }
                sumprice();
              }
            }
            //增加
            var plus=document.getElementsByName("plus");
            for(var i=0;i<plus.length;i++){
              plus[i].onclick=function(){
                var counts=this.previousElementSibling;
                var count=parseInt(counts.value);
                counts.value=++count;
                sumprice();
              }
            }
            
            //手动输入
            var counts=document.getElementsByName("count");
            for(var i=0;i<counts.length;i++){
              counts[i].onblur=function(){//onblur 事件会在对象失去焦点时发生。
                var count=parseInt(this.value);
                if(isNaN(count)||count<1){
                count=1;
                }
                this.value=count;
                sumprice();
              }
            }
            
            
            //计算
          function sumprice() {
              var tbody = document.getElementById("cart-goods-list");
              var tbodyTr = tbody.getElementsByTagName("tr");
              var sumprice=0;
              for(var i = 0; i < tbodyTr.length; i++) {
                //获取单价
                var priceEm = tbodyTr[i].getElementsByClassName("price-em")[0];
                var price = parseFloat(priceEm.innerText);
                //获取数量
                var counts = tbodyTr[i].getElementsByClassName("combo-value")[0];
                var count = parseInt(counts.value);
                //乘积
                var chengji=price*count;
                //把乘积弄到金额里面
                var amountEm=tbodyTr[i].getElementsByClassName("amount-em")[0];
                amountEm.innerText=chengji.toFixed(2);//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
                
                //获取单选框
                var liD=tbodyTr[i].getElementsByTagName("input")[0];
                if(liD.checked){
                  sumprice+=chengji;
                }
            }
            var zong=document.getElementById("total-amount-em");
            zong.innerText=sumprice.toFixed(2);
          }
          });

         tbody.appendChild(tr);
              }
   
            }
       })
    </script>
    
</head>
<body><script src="../iconfont/iconfont.js"></script>
    <header id="header" >
        <div class="logo l">
            <div class="logo_box" style="background:url(../img/logo.jpg);">
            <!-- <img src="../img/logo.jpg" alt="仿一加官网（软件18.4姜佳鑫）"" title="仿一加官网（软件18.4姜佳鑫）"> --></div>
        </div>
        <div class="menu ">
          <div class="menu_box">
         <ul id="nav-pages" class="nav-pages"style="overflow: hidden;">
             <li class="page">
                 <a href="https://www.oneplus.com/cn/8t?from=head">
                     <span>8系列</span>
                     <span class="iconfont icon-new1" id="captain"></span>
                 </a> 
                 <div class="nav_box_t">
                   <div class="eight">
                     <div class="pro"><a href="https://www.oneplus.com/cn/8t-cyberpunk2077">
                       <div class="pic">
                         <img src="../img/good1.png" alt="" style="width: 100px;height: 100px;margin: 20px 0px auto;">
                       </div>
                       <div class="des">
                         <p>OnePlus 8Pro 黑镜</p>
                       </div>
                     </a></div>
                     <div class="pro"><a href="https://www.oneplus.com/cn/8-pro?from=head">
                      <div class="pic">
                        <img src="../img/good2.png" alt="" style="width: 100px;height: 100px;margin: 20px 0px auto;">
                      </div>
                      <div class="des">
                        <p>OnePlus 8Pro 青空</p>
                      </div>
                    </a></div>
                    <div class="pro"><a href="https://www.oneplus.com/cn/8t?from=head">
                      <div class="pic">
                        <img src="../img/good3.png" alt="" style="width: 100px;height: 100px;margin: 20px 0px auto;">
                      </div>
                      <div class="des">
                        <p>OnePlus 8 银翼</p>
                      </div>
                    </a></div>
                    <div class="pro"><a href="https://www.oneplus.com/cn/8?from=head">
                      <div class="pic">
                        <img src="../img/good4.png" alt="" style="width: 100px;height: 100px;margin: 20px 0px auto;">
                      </div>
                      <div class="des">
                        <p>OnePlus 8 梦幻</p>
                      </div>
                    </a></div>
                   </div>
                 </div>
             </li>
             <li class="page">
                 <a href="./router/shoppingcar.html">
                     <span>商城</span>
                 </a>
             </li>
             <li class="page">
              <a href="https://www.oneplus.com/cn/brand?from=head">
                  <span>品牌</span>
              </a>
             </li>
             <li class="page">
              <a href="https://www.oneplus.com/cn/support?from=head">
                  <span>服务</span>
              </a>
             </li>
             <li class="page">
              <a href="http://www.oneplusbbs.com/?from=head">
                  <span>论坛</span>
              </a>
             </li>
             <li class="page">
              <a href="https://www.oneplus.com/cn/retail?from=head">
                  <span>零售店</span>
              </a>
             </li>
         </ul>
            </div>
      </div>
        <div class="login">
            <ul>
                <li style="width:150px;text-align: center;"><a href="#main">
                <span><i class="iconfont icon-icon-test" style="font-size:22px"></i></span>
            </a>
            </li>
            <li>
               <a href="">
                <span><i class="iconfont icon-icon-test1" style="font-size:22px"></i></span>
            </a>  <div class="login_box_t ">
              <div style="width: 280px;height: auto;margin: 10px auto;">
                 <div class="login_list"><a href="">订单</a></div>
              <div class="login_list"><a href="">账单</a></div>
              <div class="login_list"><a href="">推荐有礼</a></div>
              <a href="./login.html" class="layui-btn layui-btn-sm layui-btn-danger" style="margin-top: 10px;float: right;">去登录</a>
              </div>
             
             
              <!-- <form class="layui-form" action="" style="padding:15px">
                <div class="layui-form-item">
                  <label class="layui-form-label">账号</label>
                  <div class="layui-input-block" style="width: 200px;">
                    <input type="text" name="title" required  lay-verify="required" placeholder="Oneplus账号" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">密码</label>
                  <div class="layui-input-inline" style="width: 200px;">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                  </div>
                </div> 
                 <div class="layui-form-item" style="margin-top: 10px;">
                    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-submit lay-filter="formDemo" style="margin-left: 30px;">登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm" style="margin-left: 20px;">注册</button>
                </div> 
              </form>-->
            </div>
            </li>
        </ul>
        </div>
    </header>
<!-- 轮播图 -->
<div class="layui-carousel" id="test1">
    <div carousel-item>
      <div><img src="../img/lunbo1.jpg" alt=""></div>
      <div><img src="../img/lunbo2.jpg" alt=""></div>
      <div><img src="../img/lunbo3.jpg" alt=""></div>
    </div>
  </div>
    <!-- 商品展示 -->
    <article id="show">
<div class="wrapper">
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good1.png" alt="">
      </div><div class="show-price">
      <p class="good_name">OnePlus 8Pro 黑镜</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>4,799.00</span></p> 
      <!-- <span class="iconfont icon-jia3"></span> -->
      <svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg>
      </div>
      
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good2.png" alt="">
      </div><div class="show-price">
      <p class="good_name">OnePlus 8Pro 青空</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>4799.00</span></p>
       <svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg> </div>
       
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good3.png" alt="">
      </div><div class="show-price">
      <p class="good_name">OnePlus 8 银翼</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>3599.00</span></p> <svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg></div>
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good4.png" alt="">
      </div><div class="show-price">
      <p class="good_name">OnePlus 8 梦幻</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>3599.00</span></p><svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg> </div>
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good5.png" alt="">
      </div><div class="show-price">
      <p class="good_name">OnePlus 8T 科技全包保护壳</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>99.00</span></p>
       <svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg> </div>
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good6.png" alt="">
      </div><div class="show-price">
      <p class="good_name">OnePlus 8T  3D钢化玻璃保护膜  黑色</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>119.00</span></p><svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg> </div>
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good7.png" alt="">
      </div><div class="show-price">
      <p class="good_name">OnePlus 8T 砂岩全包保护壳</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>99.00</span></p><svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg> </div>
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good8.png" alt="">
      </div><div class="show-price">
      <p class="good_name">一加云耳 Z</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>249.00</span></p><svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg> </div>
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good9.png" alt="">
      </div><div class="show-price">
      <p class="good_name">OnePlus Buds 白色</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>299.00</span></p><svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg> </div>
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good10.png" alt="">
      </div><div class="show-price">
      <p class="good_name">OnePlus Buds 黑色</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>299.00</span></p><svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg> </div>
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good11.png" alt="">
      </div><div class="show-price">
      <p class="good_name">OnePlus Buds 蓝色</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>299.00</span></p><svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg> </div>
  </div>
  <div class="item">
    <div class="show-image" > 
      <img src="../img/good12.png" alt="">
      </div>
      <div class="show-price">
      <p class="good_name">一加 Warp Type-C 数据线</p>
       <p class="good_price" style="font-size: 14px;">最低价￥<span>79.00</span></p>
       <svg class="icon " aria-hidden="true" >
        <use xlink:href="#icon-jia3"></use>
      </svg> </div>
  </div>
</div>
    </article>
    <article id="service">
        <img src="../img/contall.png" alt="" >
      </article>
      <article id="shopping_cart">
        <div id="main">
          <div class="container">
          <div id="cart">
          <h1 style="font-weight: bolder;">我的购物车</h1>
          <form action="#" method="post">
          <table class="form">
          <thead>
          <tr>
          <th width="8%">选择</th>
          <th width="50%">商品</th>
          <th width="13%">单价（元）</th>
          <th width="15%">数量</th>
          <th width="14%">金额（元）</th>
          </tr>
          </thead>

          <tbody id="cart-goods-list">
         
          </tbody>

          <tfoot>
          <tr>
            <td colspan="2">
              <label>
                <input type="checkbox" name="all">
                <span>全选</span>
              </label>
              <a href="#"id="cart-delete">删除</a>
            </td>
            <td colspan="3">
              <span>合计：</span>
              <strong id="total-amount">￥<em id="total-amount-em">0.00</em></strong>
              <input type="submit" value="立即结算" id="settlement">
            </td>
          </tr>
          </tfoot>
          
          </table>
          </form>
          </div>
          </div>
          </div>
      </article>
      <footer id="footer" style="border-top:1px solid whitesmoke;">
        <div class="footer-list">
        <ul class="footer-list-ul">
          <p>一加产品</p>
          <li>
            <a href="">OnePlus 8T</a>
          </li>
          <li>
            <a href="">
              OnePlus 8Pro
            </a>
          </li>
          <li><a href="">
            OnePlus 8
          </a></li>
          <li>
            <a href="">
              OnePlus 7T
            </a>
          </li>
          
        </ul>
        <ul class="footer-list-ul">
          <p>配件</p>
          <li>
            <a href="">耳机</a>
          </li>
          <li>
            <a href="">
              壳/膜
            </a>
          </li>
          <li><a href="">
           数据线
          </a></li>
          <li>
            <a href="">
             套装
            </a>
          </li>
          
        </ul>
        <ul class="footer-list-ul">
          <p>关于一加</p>
          <li>
            <a href="">了解一加</a>
          </li>
          <li>
            <a href="">
              加入一加
            </a>
          </li>
          <li><a href="">
            可持续发展
          </a></li>
          <li>
            <a href="">
             云服务
            </a>
          </li>
          <li>
            <a href="">
             预设应用公示
            </a>
          </li>
          
        </ul>
        <ul class="footer-list-ul">
          <p>服务支持</p>
          <li>
            <a href="">购买帮助</a>
          </li>
          <li>
            <a href="">
             购买保险
            </a>
          </li>
          <li><a href="">
            购买手册
          </a></li>
          <li>
            <a href="">
             寄修服务
            </a>
          </li>
          <li>
            <a href="">
             联系我们
            </a>
          </li>
        </ul></div>
        <div class="footer-nav">
        <p class="footer_nav_p l">粤ICP备13080605号 | 备案主体编号: 44201910955995
          </p>
          <div class="footer_nav_list r">
            <a href="#">隐私政策</a> |  <a href="#">用户协议</a>  |  <a href="#">知识产权政策</a>  |  <a href="#">站点地图</a>
        </div></div>
      </footer>  
     <script src="../layui/layui.js"></script>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
 var ins = carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height:'380px'
    ,arrow: 'always' //始终显示箭头
    ,anim: 'fade' //切换动画方式
    ,autoplay:'true'
    ,interval:'3000'
  });
}); 
//重置轮播
ins.reload(options);
 </script>  
<!-- 添加购物车 -->
<!-- <script>
$(".icon").click(function () {
  $(this).css("background","green");//点击添加按钮按钮变成绿色
  var img = $(this).parent().siblings(".show-image").children("img").attr("src");//获取点击元素父元素同级img的src
  var txt = $(this).siblings("p.good_name").html();
  var money = $(this).siblings("p.good_price").children("span").html();
  console.log(money)
  $(".cart_box_t").append("<div style='width:350px;height:100px;'><img style='float: left;width: 80px;height: 80px;'' src='"+img+"'  /><p style='width:140px;float:left'>"+txt+"</p><p style='width:140px;float:left;'>"+money+"</p><br/></div>");
  // play(event);
});</script>  -->
</body>

</html>